<script setup lang="ts">
import { toEditPageCheck } from '@/utils'
import DebuggerBox from '@views/gateway/components/debugger-gateway/DebuggerBox.vue'
import { Template } from '@/api/entity/variable'
import { getVariableModelListAPI } from '@/api/variable'

const props = withDefaults(defineProps<{
  // 网关id
  id?: string,
  name?: string,
  modelValue?: boolean,
  updateOnlineStatus?: boolean,
  isDialog?: boolean
}>(), {
  updateOnlineStatus: true,
  isDialog: false
})

const emits = defineEmits(['update:modelValue'])

// region TODO 生成变量模板
type templatesType = { id: string, address: string[], name: string }
const templatesList = shallowRef<templatesType[]>([])
const templatesDialogModel = ref(false)

const templateForm = ref({
  // 添加/合并变量模板
  isAddVariableTemplate: true,
  variableTemplateId: null as string
})
function showTemplatesDialog () {
  getVariableTemplateList()
  templatesDialogModel.value = true
}
function closeTemplatesDialog () {
  templatesDialogModel.value = false
}
function templatesChange (list: templatesType[]) {
  templatesList.value = list
}
// endregion

// region TODO 跳转
function toAddPage (item: templatesType) {
  toEditPageCheck({
    name: 'AddVariableTemplate',
    message: '已存在未编辑完成的变量模板',
    params: { defaultValue: item },
    query: {},
    checkExistFn (route: any): boolean {
      return !!route
    }
  })
}

function toEditPage (item: templatesType) {
  const id = templateForm.value.variableTemplateId
  if (!id) {
    ElMessage.info('请选择一个变量模板')
    return
  }
  toEditPageCheck({
    name: 'EditVariableTemplate',
    message: '已存在未编辑完成的变量模板',
    params: { defaultValue: item },
    query: { id },
    checkExistFn (route: any): boolean {
      return !!route
    }
  })
}

function toVariableTemplate (item: templatesType) {
  templateForm.value.isAddVariableTemplate ? toAddPage(item) : toEditPage(item)
}
// endregion

// region TODO 变量列表
const variableTemplateList = shallowRef<Template[]>([])
function getVariableTemplateList () {
  getVariableModelListAPI().then((res) => {
    res.result().then((rdata) => {
      variableTemplateList.value = rdata.data
    })
  })
}
// endregion

// region TODO Dialog模式
const changeDialogCustomer = computed({
  get (): boolean {
    return props.modelValue
  },
  set (val) {
    emits('update:modelValue', val)
  }
})
// endregion

</script>

<template>
  <!--对话框模式-->
  <el-dialog
    v-if="props.isDialog"
    v-model="changeDialogCustomer"
    title="网关调试" width="900px" :close-on-click-modal="false"
    draggable :modal="false"
  >
    <div style="height: 50vh;">
      <debugger-box
        :id="props.id" :name="props.name" :update-online-status="props.updateOnlineStatus"
        :show-templates-dialog="showTemplatesDialog"
        :close-templates-dialog="closeTemplatesDialog"
        class="wh-100"
        @templates-change="templatesChange"
      />
    </div>
  </el-dialog>
  <!--基础模式-->
  <debugger-box
    v-else :id="props.id" :name="props.name"
    :update-online-status="props.updateOnlineStatus"
    :show-templates-dialog="showTemplatesDialog"
    :close-templates-dialog="closeTemplatesDialog"
    class="wh-100"
    @templates-change="templatesChange"
  />

  <!--模板对话框-->
  <el-dialog
    v-model="templatesDialogModel" title="生成变量模板" :close-on-click-modal="false"
    draggable :modal="false" width="300px"
  >
    <div style="margin: -20px 0;">
      <div class="">
        <el-radio-group v-model="templateForm.isAddVariableTemplate">
          <el-radio :label="true">新建变量模板</el-radio>
          <el-radio :label="false">合并到现有模板</el-radio>
        </el-radio-group>
        <div v-if="!templateForm.isAddVariableTemplate" class="d-flex-align-center">
          <el-select v-model="templateForm.variableTemplateId" placeholder="请选择现有模板">
            <el-option v-for="item in variableTemplateList" :key="item.id" :value="item.id" :label="item.modelName" />
          </el-select>
          <refresh-btn class="ml-2 fs-24 color-primary" @click="getVariableTemplateList" />
        </div>
      </div>
      <div class="template-list mt-2">
        <div v-for="item in templatesList" :key="item.id" class="template-list__item cursor-pointer" @click="toVariableTemplate(item)">
          <div>{{ item.name }}</div>
          <div class="color-secondary">变量：{{ item.address.length }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.template-list {
  max-height: 280px;
  overflow: auto;
  .template-list__item {
    padding: 16px;
    border: 1px solid var(--yk-color-divider);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    & + .template-list__item{
      margin-top: 8px;
    }
    &:hover {
      background-color: var(--yk-color-primary-alpha-1);
      border-color: var(--yk-color-primary);
    }
  }
}
</style>
